<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chinamap_mash</title>
    <script type="text/javascript" src="../lib/d3.js"></script>
    <script type="text/javascript" src="../lib/topojson.js"></script>
</head>
<body>
<script type="text/javascript">
    var width = 1000, height = 1000;

    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("tranform", "translate(0,0)");

    var projection = d3.geo.mercator()
        .center([107, 31])
        .scale(850)   //等下修改数值看看啥用的
        .translate([width / 2, height / 2]);

    var path = d3.geo.path().projection(projection);

    var color = d3.scale.category20();

    d3.json("../geojson/china.topojson",function(error,toporoot){
        if(error)
            return console.log(error);

        //获取西藏和新疆的边界线
        var boundary = topojson.mesh(toporoot,toporoot.objects.china,function (a,b) {
            //经尝试发现ａ和ｂ的取值存在顺序关系，参数相反的话无法识别，所以正反条件都加上了
            return (a.properties.name ==="西藏" && b.properties.name ==="新疆")
                or (b.properties.name ==="西藏" && a.properties.name ==="新疆");
        });

        console.log(boundary);

        var georoot = topojson.feature(toporoot,toporoot.objects.china);

        svg.selectAll("path")
            .data(georoot.features)
            .enter()
            .append("path")
            .attr("class","province")
            .style("fill","#ccc")
            .attr("d",path);

        svg.append("path")
            .datum(boundary)
            .attr("class","boundary")
            .style("fill","none")       //path如果不设置fill为none的话会自带黑色填充，导致无法呈现为一条线
            .style("stroke","blue")
            .style("stroke-width",3)
            .attr("d",path);

    });


</script>

</body>
</html>